<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>考勤卡添加</title>
    <link rel="stylesheet" href="/scriptZIP/layui.min.css">
    <link rel="stylesheet" href="../css/item.css">
    <link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
    <style>
        .layui-row {
            margin-top: 50px;
        }

        .offer {
            width: 90px;
            height: 35px;
            background: #1E9FFF;
            color: white;
            text-align: center;
            line-height: 35px;
            font-size: 16px;
            border-radius: 4px;
        }

        .return {
            width: 80px;
            height: 35px;
            background: #1E9FFF;
            color: white;
            text-align: center;
            line-height: 35px;
            margin-top: -35px;
            margin-left: 130px;
            font-size: 16px;
            border-radius: 4px;
        }

        .vs__dropdown-toggle {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            display: flex;
            padding: 0 0 4px;
            background: 0 0;
            border-radius: 4px;
            white-space: normal;
            width: 50%;
            background-color: #ffffff;
            height: 38px;
        }

        .vs__dropdown-menu {
            width: 50%;
        }
    </style>

</head>

<body>
    <br>
    <br>
    <div class="layui-row" id="vue-root">

        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-block">
                <input name="cardnumber" v-validate="'required'" autocomplete="off" placeholder="请输入卡号"
                    class="layui-input cardnumber" v-model="item.no">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">学生</label>
            <div class="layui-input-block">
                <v-select placeholder="请选择学生" label="name" :options="students" :reduce="item => item.id"
                    v-model="item.personId"></v-select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">关系</label>
            <div class="layui-input-block">
                <select class="ui-select layui-input" v-model="item.status" v-validate="'required'" data-vv-name="关系">
                    <option disabled="disabled" :value="undefined">请选择关系</option>
                    <option :value="0">本人</option>
                    <option :value="2">父亲</option>
                    <option :value="3">母亲</option>
                    <option :value="4">其他家长</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="offer" @click="submit">立即提交</div>
                <div class="return" onclick="history.back()">取消</div>
            </div>
        </div>

    </div>

    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/vue-select.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        Vue.component('v-select', VueSelect.VueSelect);
        var app = new Vue({
            el: '#vue-root',
            data: {
                item: {
                    no: '',
                    personId: null,
                    status: null
                },
                classess: [],
                students: [],
                classesId: null,
            },
            created: function () {
                var schoolId = top_params().id;
                if (!schoolId) {
                    alert('未知学校');
                    throw '未知学校';
                }
                this.schoolId = schoolId;
                this.item.no = this.generateCardNumber();
                axios.get('/pc/student/all1/' +schoolId ).then(function (res) {
                            this.students = res.data;
                        }.bind(this));
            },
            methods: {
                generateCardNumber: function () {
                    // 获取当前时间戳的最后六位
                    const timestamp = Date.now().toString();
                    const cardNumber = timestamp.slice(-6);
                    return cardNumber;
                },
                submit: function () {
                    if (!this.item.no) {
                        alert('请填写卡号');
                        return;
                    }
                    if (!this.item.personId || this.item.status === undefined) {
                        alert('请选择完整');
                        return;
                    }
                    axios.put('/pc/card/bind', toFormParams(this.item)).then(function () {
                        alert('成功');
                        history.back();
                    });
                }
            },
            // watch: { 
            //     classesId: function (newValue, oldValue) {
            //         if (newValue)
            //             axios.get('/pc/student/all/' + newValue).then(function (res) {
            //                 this.students = res.data;
            //             }.bind(this));
            //     },
            // }
        });
    </script>

</body>

</html>
